<template>
<div >
<el-row type="flex" justify="center" >
          <el-col :span="18.5" class="card1"  > 
                <h1 class="hh1">MBTI职业性格测试</h1>

                <el-card class="box-card"   style="height:60vh">
                    <div style="color:indianred">MBTI测试前须知：</div>
                    <div>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</div>
                    <div>选项只有一次机会，相信第一感觉</div>
                    <div>选项只有一次机会，相信第一感觉</div>
                    <div>*结果仅供参考</div>
                </el-card>

                <div style="margin:0 auto;">

                <el-divider></el-divider>

                <el-row type="flex" justify="center">
                <el-form-item class="mb-4">
                    
                    <el-button type="primary" plain @click="this.$router.push({path:'/testing'})">开始答题</el-button>

                </el-form-item>
                </el-row>

                </div>
          </el-col>

</el-row>

</div>
</template>

<script setup>
// import { ref } from 'vue'
// import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
name:'Teststart'
// const value = ref()
// const icons = [ChatRound, ChatLineRound, ChatDotRound]
</script>

<style>
.back{
    background-color: aqua;
    
}

/* .hh1 {
    text-align: center;
    color: indianred;
} */
.el-row {
    margin-bottom: 100px;
}
.grid-content {
    background: rgb(14, 214, 131);
    border-radius: 4px;
    min-height: 5px;
    min-width: 100px;

    text-align: center;

}
.card1{
    height: 80vh;
    width: 1100px;
    border-radius:300px;
    box-shadow: 0 2px 12px 0 rgb(243, 102, 102);
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}
</style>